<template>
    <div style="min-height: 100vh;background:#f5f5f5;position:relative;overflow:hidden" class="shopChart">
        <div class="chartTop">
            <p>购物车</p>
            <span v-if="!isManage" @click="switchManage">管理</span>
            <span v-else @click="switchManage">完成</span>
        </div>
        <div style="margin-top:45px">
            <van-checkbox-group v-model="result" style="padding: 0 4vw;padding-bottom: 12vw;" v-if="data.list.length>0">
                <van-checkbox
                    v-for="(item,index) in data.list"
                    :name="item"
                    :key="index"
                    checked-color="#ff4c50"
                    label-disabled
                    style="background: #ffffff;padding:5px;margin-bottom:10px;position:relative">
                  <router-link :to="'/detail?type='+item.activity_type+'&group_id=0&limit_id=0&join_id=0&goods_id='+item.goods_id+'&activity_id='+item.activity_id">
                    <div style="float:right;width: 77.5vw">
                        <span class="goodsPic"><img :src="item.goods_img" alt=""></span>
                        <div class="msg">
                            <p class="goodsTitle">{{item.goods_name}}</p>
                            <p class="goodsSku">{{item.spec_array}}</p>
                            <p class="goodsChioce">
                                <span>￥{{item.finnal_price}}</span>
                            </p>
                            <div class="jiangjia">
                                {{item.price_difference}}
                            </div>
                        </div>
                    </div>
                  </router-link>
                  <img src="@/assets/img/Shape.png" style="width:8px;position:absolute;top: 20px;right: 5px" v-if="isManage" @click="delCart(item.cart_id)"/>
                  <span style="float:right;position:absolute;right: 3px;top:55px"><van-stepper v-model="item.goods_num" disable-input integer @change="stepChange" @plus="onPlus(item.cart_id)" @minus="onminus(item.cart_id)"/></span>
                </van-checkbox>
            </van-checkbox-group>
            <div v-else>
                <div class="listNone" v-if="isNone">
                  <img src="@/assets/img/lackicon.png" style="width: 50vw"/>
                  <p>您的购物车还是空空的哦~</p>
                </div>
            </div>
        </div>
        <van-submit-bar
        :price="allMoney"
        button-text="结算"
        v-if="!isManage"
        @submit="onSubmit">
        <van-checkbox v-model="checked"  checked-color="#ff4c50" style="margin-left: 4vw" @change="allChecked()">全选</van-checkbox>
    </van-submit-bar>
        <div v-else class="submitBar">
            <van-checkbox v-model="checked" checked-color="#ff4c50" style="margin-left: 4vw;float:left" @change="allChecked()">全选</van-checkbox>
            <div class="submitButton">
                <button style="width:80px;background:#333333" @click="delCart(0)">删除</button>
            </div>
        </div>
        <Footer :type="2"></Footer>
    </div>
</template>

<script>
    import request from "@/request/index.js"
    import chartTop from "@/components/chart/chartTop.vue"
    import Footer from "@/components/common/Footer";
    export default {
        name: "shopChart",
        components: {
            chartTop,
            Footer,
        },
        data() {
            return {
                data:{list:[]},
                result:[],
                isManage: false,
                checked: false,
                allMoney:0,
                cart_id:'',
                types:4,
                isNone:false,
            }
        },
        watch:{
            result(newVal,oldVal){
                if((this.data.list.length==newVal.length)&&(this.data.list.length)){
                    this.checked=true;
                }else{

                }
                this.sumAllmoney();
            },
        },
        methods:{
            sumAllmoney(){
                this.allMoney=0;
                this.result.forEach((v,i) => {
                    this.allMoney+=v.finnal_price*v.goods_num*100
                });
            },
            stepChange(){
                this.sumAllmoney();
            },
            allChecked(){
                if(this.checked){
                    this.result=this.data.list;
                }else{
                    this.result=[];
                }
            },
            delCart(cartId){
                if(cartId){
                    this.data.list.forEach((v,j) => {
                        if(v.cart_id==cartId){
                            this.data.list.splice(j,1)
                        }
                    });
                    request.delCart(this,cartId);
                }else{
                    if(this.result.length){
                        var cartIds='';
                        var that=this;
                        for(var i=0;i<that.result.length;i++){
                            if(i==0){
                                cartIds=cartIds+that.result[i].cart_id;
                            }else{
                                cartIds=cartIds+','+that.result[i].cart_id
                            }
                        }
                        var cartIdsList=cartIds.split(',');
                        cartIdsList.forEach((value,index)=>{
                            that.data.list.forEach((v,j) => {
                                if(v.cart_id==value){
                                    that.data.list.splice(j,1);
                                }
                            });
                        })
                        request.delCart(this,cartIds);
                    }else{
                        this.$toast('请选择商品')
                    }
                }

            },
            onPlus(cartId){
                request.updateCart(this,1,cartId);
            },
            onminus(cartId){
                request.updateCart(this,2,cartId)
            },
            switchManage(){
                this.isManage=!this.isManage;
            },
            onSubmit(){
                if(this.result.length){
                    var that=this;
                    this.result.forEach((v,i)=>{
                        if(i==0){
                            this.cart_id=v.cart_id;
                        }else{
                            this.cart_id=this.cart_id+','+v.cart_id
                        }
                    })
                    request.buyGoods(this,0,0,0,4)
                }else{
                    this.$toast('请选择商品')
                }

            }
        },
        mounted() {
            request.cartList(this);
        },
    }
</script>

<style scoped lang="scss">
.goodsTitle{
    height:3em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.van-submit-bar{
    bottom: 50px!important;
    border-bottom: 1px solid #f5f5f5;
}
.submitBar{
    position: fixed;
    bottom: 50px;
    width: 100%;
    line-height: 50px;
    background: #ffffff;
    // padding: 5px 0;
    .submitButton{
        float:right;
        // border-radius: 50px;
        overflow: hidden;
        // margin-right: 4vw;
        button{
            float:right;
            color: #ffffff;
            text-align: center;
        }
    }
}
.chartTop{
    background: #333333;
    color: #ffffff;
    text-align: center;
    font-size: 20px;
    line-height: 45px;
    position: fixed;
    top: 0px;
    width: 100vw;
    z-index: 2;
    span{
        position: absolute;
        right: 4vw;
        top: 0;
        font-size: 15px;
    }
}

.goodsPic{
    width: 21.3vw;
    height: 21.3vw;
    display: inline-block;
    line-height: 80px;
    border: solid #efefef 1px;
    border-radius: 5px;
    overflow: hidden;
    img{
        width: 100%;
        height: 100%;

    }
}
.msg{
    float:right;
    color: #333333;
    font-size: 12px;
    margin-left: 10px;
    width: 53vw;
    position: relative;
    .goodsChioce{
        color: #FF5230;
        font-size: 12px;
    }
    .jiangjia{
        font-size: 12px;
        color: #ff4c50;

    }

}
.listNone{
    text-align: center;
    padding-top: 150px;
}
</style>
